<template>
	<view class="bargain-details flex-column mc-flex-vcenter" :style="{'margin-top': (!isMe?70:0) + 'rpx'}">
		<block v-if="!isMe">
			<view class="flex-column mc-flex-vcenter" style="position: absolute;top: -66rpx;left: 0;right: 0;">
				<image :src="info.photo" mode="aspectFill" class="border-radius" style="width: 120rpx;height: 120rpx;border: 2px solid white;"></image>
				<view class="mc-f12 ellipsis margin-top10" style="max-width: 400rpx;">{{info.nickName}}</view>
			</view>
			<view class="pct100 border-radius mc-f12 text-center margin-top60 margin-bottom40" style="background-color: #ffdcbe;line-height: 60rpx;">“我正在0点券抢这款皮肤，快来帮我助攻”</view>
		</block>
		<image :src="info.activityUrl" mode="widthFix" class="border-radius10" style="width: 640rpx;height: 512rpx;"></image>
		<view class="mc-f13 mc-bold margin-top30">【{{info.price}}{{info.unit||'点券'}}】{{info.activityName||''}}</view>
		<view class="mc-f12 color-orange margin-top10">砍到 0 点券免费拿</view>
		<view class="mc-flex-vcenter mc-f12 margin-top20" v-if="isShowProgress">
			<view class="padding-left6 padding-right6 border-radius4 mc-white" style="background-color: #595a5c;">{{hour}}</view>
			<view class="padding-left2 padding-right2">:</view>
			<view class="padding-left6 padding-right6 border-radius4 mc-white" style="background-color: #595a5c;">{{minute}}</view>
			<view class="padding-left2 padding-right2">:</view>
			<view class="padding-left6 padding-right6 border-radius4 mc-white" style="background-color: #595a5c;">{{second}}</view>
			<text class="ml10" style="color: #5a5a5c;">后结束</text>
		</view>
		<view class="mc-f16 mc-bold margin-top40" v-if="isComplete">
			<text>砍满</text>
			<text class="color-red"> {{info.cutDownPrice}}</text>
			<text>{{info.unit||'点券'}}，已成功免费拿</text>
		</view>
		<view class="mc-f16 mc-bold margin-top40" v-else>
			<text>已砍</text>
			<text class="color-red"> {{info.cutDownPrice}}</text>
			<text>{{info.unit||'点券'}}，还差</text>
			<text class="color-red"> {{difference}} </text>
			<text>{{info.unit||'点券'}}</text>
		</view>
		<view class="progress-bar-wrap pct100 margin-top30">
			<view class="bg-color-orange border-radius" style="height: 100%;" :style="{width:progress+'%'}"></view>
		</view>
		<block v-if="isMe">
			<block v-if="isOngoing">
				<button type="primary" class="mc-flex-center mc-flex-vcenter border-radius color-white pct100 margin-top40 animation-btn"
				 style="background-color: #f06338;" v-if="!isVideoBargain" @tap="videoBargainClick">
					<image src="/static/images/ui_bofangtubiao.png" mode="aspectFill" class="width35 height35 margin-right15"></image>
					<text>再砍一刀</text>
				</button>
				<!-- <button @tap="openQzonePublish" type="primary" class="mc-flex-center mc-flex-vcenter border-radius color-white pct100 margin-top40 animation-btn"
				 style="background-color: #f06338;" v-else>加速砍价</button> -->
			</block>
			<button @tap="goFound" class="border-radius color-white pct100 margin-top40" style="background-color: #f06338;"
			 v-else-if="isComplete">立即领取</button>
			<button open-type="share" class="border-radius pct100 margin-top40" style="background-color: #fadc22;" v-if="isOngoing">人多力量大，喊朋友帮砍</button>
			<button @tap="anewBargain" class="border-radius pct100 margin-top40" style="background-color: #fadc22;" v-else>再领一次</button>
		</block>
		<block v-else>
			<button @tap="videoBargainClick" type="primary" class="mc-flex-center mc-flex-vcenter border-radius color-white pct100 margin-top40 animation-btn"
			 style="background-color: #f06338;" v-if="!isVideoBargain && isOngoing">
				<image src="/static/images/ui_bofangtubiao.png" mode="aspectFill" class="width35 height35 margin-right15"></image>
				<text>帮好友砍一刀</text>
			</button>
			<button @tap="anewBargain" type="primary" class="mc-flex-center mc-flex-vcenter border-radius color-white pct100 margin-top40 animation-btn"
			 style="background-color: #f06338;" v-else>我也要免费拿</button>
		</block>
		<view class="color-orange mc-f12 margin-top30">砍价秘籍：邀请新用户，有巨额暴击哦！</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		props: {
			info: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				timers: null,
				time: 0,
			}
		},
		computed: {
			...mapGetters('user', ['_isLogin', '_gameInfo']),
			difference: function() {
				return (this.info.price - this.info.cutDownPrice).toFixed(2)
			},
			isMe: function() {
				return this._gameInfo.userId == this.info.userId
			},
			isVideoBargain: function() {
				// console.log('this.info.isBargain',this.info.isBargain===1)
				return this.info.isBargain === 1
			},
			isShowProgress: function() {
				return (!this.isOverdue && this.info.status == 3) || this.info.status == 1
			},
			isOngoing: function() { //是否进行中
				return this.info.status === 1 && this.time != 0
			},
			isComplete: function() { //是否砍价成功
				return this.info.status === 2
			},
			isInvalid: function() { //是否失效
				return this.info.status === 3 && this.time == 0
			},
			isExchange: function() { //是否已兑换
				return this.info.status === 4
			},
			isOverdue: function() { //是否逾期
				return this.info.isInvalid
			},
			progress: function() { //百分比进度
				let progress = (parseFloat(this.info.cutDownPrice * 100) / this.info.price).toFixed(1);
				progress = progress > 100 ? 100 : progress;
				return progress || 0
			},
			hour: function() {
				return this.$util.joinZeroNum(parseInt(this.time / 3600)) || '00'
			},
			minute: function() {
				return this.$util.joinZeroNum(parseInt(this.time / 60) % 60) || '00'
			},
			second: function() {
				return this.$util.joinZeroNum(parseInt(this.time) % 60) || '00'
			},
		},
		mounted() {
			this.countDown()
		},
		beforeDestroy() {
			if (this.timers) {
				clearTimeout(this.timers)
				this.timers = null
			}
		},
		methods: {
			...mapActions('common', ['tabCurrent2Up']),
			countDown() {
				const time = parseInt((this.info.endTime - new Date().getTime()) / 1000);
				this.time = time > 0 ? time : 0
				if (time > 0)
					this.timers = setTimeout(() => {
						this.countDown()
					}, 1000)
			},
			anewBargain() {
				this.tabCurrent2Up(1);
				uni.switchTab({
					url:'/pages/tabBar/draw/index'
				})
			},
			videoBargainClick() {
				console.log('视频砍一刀');
				this.$store.dispatch('videoAd/show', {
					success: () => {
						this.videoBargain();
					},
					fail: () => {
						uni.showToast({
							title: '播放失败',
							icon: 'none'
						});
					}
				});
			},
			async videoBargain() {
				await this.$api.bargain.videoBargain({
					id: this.info.id,
					type: 1,
				})
				this.$emit('videoBargain')
			},
			goFound() {
				uni.redirectTo({
					url: '/pages/bargain/found/found?id=' + this.info.id
				});
			},
			// ---------------------------------------
			// 保存二维码
			setFormId(e) {
				this.$store.dispatch('common/formIdListUp', {
					e: e,
					isSave: true
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.bargain-details {
		position: relative;
		width: 706rpx;
		margin: 40rpx auto;
		padding: 60rpx 66rpx;
		z-index: 9;
		background-color: white;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.progress-bar-wrap {
		background-color: #E1E1E1;
		border-radius: 1000px;
		height: 20rpx;
	}

	.animation-btn {
		animation: animation 1s infinite;
	}

	button {
		font-weight: bold;
	}

	@keyframes animation {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
